<template>

  <el-dialog title="题目预览" :visible="showDialog" width="50%">
    <!-- 第一块 -->
    <el-row :gutter="20" style="padding: 10px">
      <el-col :span="6"
        ><div>
          【题型】：
          <span v-if="content.questionType === '1'">单选题</span>
          <span v-else-if="content.questionType === '2'">多选题</span>
          <span v-else-if="content.questionType === '3'">简答题</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div>【编号】：{{ content.id }}</div></el-col
      >
      <el-col :span="6"
        ><div>
          【难度】：
          <span v-if="content.difficulty === '1'">简单</span>
          <span v-else-if="content.difficulty === '2'">一般</span>
          <span v-else-if="content.difficulty === '3'">困难</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div>【标签】：{{ content.tags }}</div></el-col
      >
    </el-row>
    <el-row :gutter="20" style="padding: 10px">
      <el-col :span="6"
        ><div>【学科】：{{ content.subjectName }}</div></el-col
      >
      <el-col :span="6"
        ><div>【目录】：{{ content.catalogID }}</div></el-col
      >
      <el-col :span="6"
        ><div>【方向】：{{ content.direction }}</div></el-col
      >
    </el-row>
    <hr />
    <!-- 题目 -->
    <div>
      【题干】：
      <div v-html="content.question" style="color:blue;">{{ content.question }}</div>
      <div v-if="content.questionType === '1'">
        <div>选项：（以下选中的选项为正确答案）</div>
        <el-radio-group v-model="radio" class="disable">
          <el-radio
            style="padding: 10px 0; display: block"
            :label="option.isRight"
            v-for="option in content.options"
            :key="option.code"
            >{{ option.title }}</el-radio
          >
        </el-radio-group>
      </div>
      <div v-else-if="content.questionType === '2'">
        <div>选项：（以下选中的选项为正确答案）</div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            style="padding: 10px 0; display: block"
            :label="option.code"
            v-for="option in content.options"
            :key="option.code"
            >{{ option.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <hr />
    <!--  参考答案-->
    <div>
      <div>
        【参考答案】：
        <el-button type="danger" @click="isShow = !isShow"
          >视频答案预览</el-button
        >
      </div>
      <video
        :src="content.videoURL"
        style="width: 180px"
        v-show="isShow"
        controls="controls"
        autoplay="autoplay"
      ></video>
    </div>
    <hr />
    <!-- 答案解析 -->
    <div>
      【答案解析】：
      <div v-html="content.answer">{{ content.answer }}</div>
    </div>
    <hr />
    <!-- 题目备注 -->
    <div>
      <div>【题目备注】：{{ content.remarks }}</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close" :loading="isLoading"
        >关闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getQuestionsById } from "@/api/questions";

export default {
  name: "WorkspaceJsonPreview",

  data() {
    return {
      showDialog: true,

      questionInf: {},
      content: {},

    };
  },

  mounted() {},
  props: {
    showDialog: {
      type: Boolean,
      showDialog: false,
    },

    itemId: {
      type: String,
      default: null,
    },
  },

  methods: {
    close() {
      this.$emit("closeDialog");
    },
    async getQuestionsById(id) {
      const data = await getQuestionsById(id);
      console.log(data.data);
      this.content = data.data;
      console.log(this.content);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
     .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }}
</style> 


